// 定义一个类
class Carousel {
    // constructor构造函数(内置)
    constructor($tag) {
        // 获取当前轮播图的父级元素
        this.tag = document.querySelector($tag);
        // 获取左右按钮元素
        this.lBtn = document.querySelector('.arrow_left');
        this.rBtn = document.querySelector('.arrow_right');
        // 获取li列表
        this.list = this.tag.querySelectorAll('.img_box>ul>li')
        // 获取小圆点
        this.dots = this.tag.querySelectorAll('.img_box>.dot_box>span');

        // 获取所有的类名(收集class集合)
        this.classNameList = ['img1', 'img2', 'img3', 'img4'];

        this.index = 0;

        this.lastIndex = this.index;

        // 执行按钮事件函数
        this.eventFn();
        this.dotEvent()
    }
    // 定义原型对象方法的地方
    // 点击按钮事件方法
    eventFn() {
        this.lBtn.addEventListener('click', () => this.lHandle())
        this.rBtn.addEventListener('click', () => this.RHandle())
    }

    // 处理左边点击事件的回调
    lHandle() {
        console.log('左边');
        // 1.添加最后一张到第一位
        this.classNameList.unshift(this.classNameList[this.classNameList.length - 1]);
        // 2.删除最后一张(重复)
        this.classNameList.pop();
        // 3.重置所有
        this.restLiClassNameFn();
        // 当前初始值index自增
        this.index--;
        // 执行小圆点颜色函数
        this.dotColor();
        // 操作完毕之后,保存上一次操作的index
        this.lastIndex = this.index;
    }

    // 处理右边点击事件的回调
    RHandle() {
        console.log('右边');
        // 改变li的类名
        // 1.把数组的第一张添加到最后一位
        this.classNameList.push(this.classNameList[0]);
        // 2. 删除第一张重复
        this.classNameList.shift();
        // 3.重置所有li的类名
        this.restLiClassNameFn();
        // 当前初始值index自增
        this.index++;
        // 执行小圆点颜色函数
        this.dotColor();
        // 操作完毕之后,保存上一次操作的index
        this.lastIndex = this.index;
    }

    // 重置li类名函数
    restLiClassNameFn() {
        this.list.forEach((item, index) => {
            // 类名集合和li列表长度是一致的,所以下标也是一致
            item.className = this.classNameList[index];
        })
    }

    // 小圆点颜色函数
    dotColor() {
        // index的最大值
        if (this.index === this.list.length) {
            // 恢复到默认的小标0,也就是第一位
            this.index = 0;
        }

        // index的最小值
        if (this.index < 0) {
            // 恢复到最后一个小圆点(li列表关联)
            this.index = this.list.length - 1;
        }

        // 清除上一次操作的类名(激活类的移除)
        this.dots[this.lastIndex].classList.remove('active')
        // 添加当前下标激活类操作
        this.dots[this.index].classList.add('active')
    }

    // 小圆点事件
    dotEvent() {
        this.dots.forEach((item, idx) => {
            item.addEventListener('mouseenter', () => {
                console.log(idx, this.lastIndex, idx - this.lastIndex);
                //  需要反转的次数
                let count = idx - this.lastIndex;
                // 如何翻转???---->执行回调函数
                // 如何执行多次???--->循环
                // 如何知道向左还是向右???----->正(右),负(左)
                if (count > 0) {
                    for (let i = 0; i < count; i++) {
                        // 执行的次数
                        this.RHandle();
                    };
                } else {
                    // count 为负数,次数没有负数,所以转正数
                    for (let i = 0; i < Math.abs(count); i++) {
                        // 执行的次数
                        this.lHandle();
                    }
                }
            })

        })
    }

}


